import React, { Component } from 'react'
import header from "./header";
import 'antd-mobile/dist/antd-mobile.css';
import style from "./style/question.module.scss"
import { Modal, List, Button,Radio} from 'antd-mobile';
const RadioItem = Radio.RadioItem;
class Question extends Component {
    state = {
        modal2: false,
        data: [
            { value: "虚假信息", label: '虚假信息' },
            { value: '产品建议', label: '产品建议' },
            { value: '功能异常', label: '功能异常' },
            { value: '其他', label: '其他' },
          ],
          value:"",
          del:"",
          phoneNumber:""
    }
    showModal = key => (e) => {
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            [key]: true,
        });
    }
    onClose = key => () => {
        this.setState({
            [key]: false,
        });
    }
    onChange = (value) => {
        this.setState({
          value,
        });
      };
      handleFous =() => {
        let del = !this.state.del
          this.setState({
              del
          })
      }
      getPhone=(e) => {
          this.setState({
              phoneNumber:e.target.value
          })
      }
      del=() => {
          this.setState({
            phoneNumber:""
          })
      }
    render() {
        return (
            <div>
                <div className={style.item} onClick={this.showModal('modal2')}>类型反馈<span className={style.sp}>{this.state.value||"请选择"}</span>
                    <div className={style.arrows}></div>
                </div>
                <div className={style.item}>
                    <label htmlFor="" className={style.call}>
                        <span>联系方式</span><input type="text" placeholder="请填写手机号码方便我们与你联系" className={style.input} 
                        value = {this.state.phoneNumber}
                        onFocus={this.handleFous} 
                        onBlur={this.handleFous}
                        onChange = {this.getPhone}
                        />
                        <span className={style.del} onClick={this.del}>{this.state.del?"X":""}</span>
                    </label>
                </div>
                <textarea name="" id="" cols="30" rows="10" className={style.area} placeholder="请填写您的意见"></textarea>
                <button className={style.btn}>确定</button>
                <Modal
                    popup
                    visible={this.state.modal2}
                    onClose={this.onClose('modal2')}
                    animationType="slide-up"
                >
                    <List renderHeader={() =>
                        <div>
                            <div>反馈类型</div>
                            <div className={style.choose}>请选择反馈类型</div>
                        </div>
                    }

                        className="popup-list">

                        <List>
                            {this.state.data.map(i => (
                                <RadioItem key={i.value} checked={this.state.value === i.value} onChange={() => this.onChange(i.value)}>
                                    {i.label}
                                </RadioItem>
                            ))}
                        </List>
                        <List.Item>
                            <Button type="primary" onClick={this.onClose('modal2')}>确定</Button>
                        </List.Item>
                    </List>
                </Modal>
            </div>
        )
    }
}
export default header(Question, "问题反馈")